{extend name="index_layout"/}
{block name="main"}
<div class="layui-card">
    <div class="layui-card-header">菜单管理</div>
    <div class="layui-card-body">
        <div class="layui-form">
            <table class="layui-hide" id="currentTable" lay-filter="currentTable"></table>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm yzn-btn-primary" data-treetable-refresh="currentTable"><i class="layui-icon layui-icon-refresh"></i> </button>
        <button class="layui-btn layui-btn-sm" data-open="{:url('add')}" title="添加"><i class="layui-icon layui-icon-addition"></i> 增加</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" id="openAll"><i class="layui-icon layui-icon-template"></i> 展开或折叠全部</button>
    </div>
</script>
<script type="text/html" id="auth">

    <input type="checkbox" name="status" data-href="{:url('multi')}?id={{d.id}}&param=auth_open" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="switchStatus" {{ d.auth_open==1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="status" data-href="{:url('multi')}?id={{d.id}}&param=status" value="{{d.id}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="switchStatus" {{ d.status==1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="icon">
    <span class="iconfont {{d.icon}}" style="color:{{d.color}}"></span>
</script>
<script type="text/html" id="action">
    <a data-open="{:url('edit')}?rule_id={{d.id}}&id={{d.id}}" class="layui-btn layui-btn-xs" title="编辑"><i class="layui-icon layui-icon-edit"></i></a>
    <a data-open="{:url('add')}?rule_id={{d.id}}" class="layui-btn layui-btn-xs layui-btn-normal" title="添加下级菜单"><i class="layui-icon layui-icon-addition"></i></a>
    <a href="{:url('ruleDel')}" class="layui-btn layui-btn-danger layui-btn-xs layui-tr-del" title="删除"><i class="layui-icon layui-icon-delete"></i></a>
</script>
<script type="text/html" id="topBtn">
    <a data-href="{:url('add')}" class="layui-btn layui-btn-sm" lay-event="add">{:lang('add')}权限</a>
</script>
{/block}
{block name="script"}
<script>
    var treeGrid = null;
    layui.use(['table', 'treeGrid', 'yznTable'], function() {
        var $ = layui.$,
            treeGrid = layui.treeGrid,
            tableId = 'currentTable',
            yznTable = layui.yznTable,
            ptable = null;

        var init = {
            table_elem: '#currentTable',
            modify_url: '{:url("multi")}',
        };

        var renderTable = function() {
            treeGrid.render({
                id: tableId,
                elem: init.table_elem,
                toolbar: '#toolbarDemo',
                idField: 'id',
                url:'{:url("index")}',
                cellMinWidth: 100,
                treeId: 'id', //树形id字段名称
                treeUpId: 'pid', //树形父id字段名称
                treeShowName: 'title', //以树形式显示的字段
                height: 'full-140',
                isFilter: false,
                iconOpen: false, //是否显示图标【默认显示】
                isOpenDefault: false, //节点默认是展开还是折叠【默认展开】
                onDblClickRow: false, //去除双击事件

                // @todo 不直接使用yznTable.render(); 进行表格初始化, 需要使用 yznTable.formatCols(); 方法格式化`cols`列数据
                cols: yznTable.formatCols([
                    [
                        {field: 'id', title: '{:lang("id")}', width: 70, fixed: true, align:"center"},
                        {field: 'sort', width: 80, title: '排序', edit: 'text', align:"center"},
                        {field: 'icon', align: 'center',title: '{:lang("icon")}', width: 60,templet: '#icon'},
                        {field: 'title', title: '权限名称', width: 200},
                        {field: 'href', title: '控制器/方法', minwidth: 200},
                        {field: 'auth_open',align: 'center', title: '是否公开', width: 150,toolbar: '#auth'},
                        {field: 'menu_status',align: 'center',title: '菜单{:lang("status")}', width: 150,templet: '#switchTpl', unresize: true, align:"center"},
                        {fixed: 'right', title:'操作',width:200, toolbar: '#action',align:"center"},
                    ]
                ], init),
            });
        }
        renderTable();

        $('#openAll').click(function(e) {
            var that = this;
            var treedata = treeGrid.getDataTreeList(tableId);
            treeGrid.treeOpenAll(tableId, !treedata[0][treeGrid.config.cols.isOpen]);
            var show = $("i", that).hasClass("icon-add");
            $("i", that).toggleClass("icon-add", !show);
            $("i", that).toggleClass("icon-min", show);
        })

        $('body').on('click', '[data-treetable-refresh]', function() {
            renderTable();
        });

        //监听单元格编辑
        treeGrid.on('edit(currentTable)', function(obj) {
            var value = obj.value,
                data = obj.data;
            $.post('{:url("multi")}', {'id': data.id,'value': value,'param':'sort'}, function(data) {
                if (data.code == 1) {
                    layer.msg(data.msg);
                } else {
                    layer.msg(data.msg);
                }

            })
        });
    });
</script>
{/block}